<template>

  <popup :show="true"
         :padding="0"
         :close="true"
         @close="closeShow">
    <div class="mengc"
         id="chat_box">
      <div class="main_chat">
        <div class="main_left">
          <ul class="chat_men_list">
            <li :class="{now_men:now_men==item}"
                v-for="(item, index) in user_list"
                @click="now_men=item"
                :key="index">
              <div class="men_head">
                <img :src="getHead(item)">
              </div>
              <p>
                {{item.nickname}}
              </p>
            </li>
          </ul>
        </div>
        <div class="main_right">

          <div v-show="!now_men"
               class="nomen">
            <nothing />

          </div>
          <header v-if="now_men">

            <div class="head_img">
              <img :src="getHead(now_men)">
            </div>
            <div class="name">
              <span>
                {{now_men.nickname}}
              </span>
            </div>

          </header>

          <div v-if="now_men">
            <div class="chat_log"
                 ref="logList">
              <ul class="chat_log_list">

                <template v-for="(item, index) in filterLog">
                  <li class="my_chat"
                      v-if="item.sender_id != now_men.uid"
                      :key="index">
                    <!-- 内容 -->
                    <div class="chat_content">
                      <p>{{item.time}} 我</p>
                      <div class="content_text_box">
                        <div class="content_text"
                             v-html="item.content">
                        </div>
                      </div>
                    </div>
                    <!-- 头像 -->
                    <div class="chat_head">
                      <img :src="myHead">
                    </div>

                  </li>

                  <li class="else_log"
                      v-else
                      :key="index">
                    <div class="chat_head">

                      <img :src="getHead(now_men)">
                    </div>
                    <div class="chat_content">
                      <p>{{item.time + now_men.nickname}} </p>
                      <div class="content_text_box">
                        <div class="content_text"
                             v-html="item.content">

                        </div>
                      </div>
                    </div>
                  </li>

                </template>

              </ul>
            </div>

            <div class="chat_inp">
              <div class="tool">

                <ChatTools  @sendEmoji_tool="sendEmoji" @imgUploadSuccess="imgUploadSuccess" />
              </div>
              <div class="chat_inp_box"
                   contenteditable="true"
                   @input="changeMsg"
                   ref="content">

              </div>
              <div class="sendBtn"
                   @click="send_msg">
                <button class="layui-btn btn">
                  发送
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </popup>
</template>

<script>
import popup from '../popup/Popup'

import { getUserChatLog } from 'server/front_k.js'

import { formatDate } from 'common/public.js'

import { default_head } from 'common/config.js'
import { mapGetters } from 'vuex'

import ChatTools from './chatTools/ChatTools'

export default {
  data() {
    return {
      log_list: [],
      user_list: [],
      now_men: null,
      msg: '',
      default_head
    }
  },
  components: {
    popup,
    ChatTools

  },
  methods: {
    send_msg() {
      if (this.msg.trim().length == 0) {
        return this.$show.open2('内容不能为空')
      }
      if (this.msg.trim().length > 20000) {
        return this.$show.open2('内容过长！')
      }
      const data = {
        uid: this.now_men.uid,
        content: this.msg
      }

      const newLog = {
        rec_id: data.uid,
        content: data.content,
        sender_id: this.getUserData.uid,
        time: formatDate(new Date(), 'yyyy-MM-dd h:m:s')
      }

      this.log_list.push(newLog)

      // 清空内容
      this.msg = ''
      this.$refs.content.innerHTML = ''
      this.$ws.send('user_send_msg', newLog)
    },
    closeShow() {
      this.$store.commit('frontChatShowing', {
        show: false,
        nowMen: this.now_men
      })
    },
    changeMsg() {
      this.msg = this.$refs.content.innerHTML
    },
    getLog() {
      getUserChatLog().then(res => {
        if (res.err_code === 1000) {
          let index
          res.data[0].forEach((v, i) => {
            if (v.uid === -9999) {
              v.nickname = '平台客服'
            }
            if (v.uid === this.getUserData.uid) {
              index = i
            }
          })

          if (index !== undefined) {
            res.data[0].splice(index, 1)
          }

          this.log_list = res.data[1]
          this.user_list = res.data[0]
          this.now_men = this.getFrontChatNowMen
          const now = this.user_list.find(v => v.uid == this.now_men.uid)

          if (now) {
            this.now_men = now
          } else {
            this.user_list.push(this.now_men)
          }
        }
      })
    },
    scroll() {
      // 设置个定时器  让它延迟显示
      setTimeout(() => {
        this.$refs.logList.scrollTop = this.$refs.logList.scrollHeight
      }, 30)
    },
    newMsg(item) {
      this.log_list.push(item)
    },
    // 接受表情
    sendEmoji(e){
      console.log();
      this.$refs.content.innerHTML +=  `<img src="${e.src}" >`
      this.msg = this.$refs.content.innerHTML


    },
    imgUploadSuccess(e){
      this.$refs.content.innerHTML +=  `<img style="width: 100px" onclick="showImg(this)"  src="${e}" >`
      this.msg = this.$refs.content.innerHTML
      
    }
  },
  computed: {
    ...mapGetters(['getUserData', 'getFrontChatNowMen']),
    getHead() {
      return function(item) {
        return item.head || default_head
      }
    },
    filterLog() {
      this.scroll()

      let arr = this.log_list.filter(v => {
        return v.sender_id == this.now_men.uid || v.rec_id == this.now_men.uid
      })

      return arr
    },
    myHead() {
      return this.getUserData.head || default_head
    }
  },
  props: {
    chatShow: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.getLog()
    this.$ws.$on('userNewMsg', this.newMsg)
    // this.now_men = this.getFrontChatNowMen
  },

}



</script>

<style scoped>
  /* img{
    max-width: 50%;
  } */

@import '~assets/css/chat.css';
</style>